<template>
  <a-collapse :default-active-key="[1]" accordion>
    <a-collapse-item v-for="item in models" :key="item.name" :header="item.name">
      <a-table :data="item.properties" :bordered="false" :pagination="false">
        <template #columns>
          <a-table-column title="属性名称" :width="300" data-index="name" />
          <a-table-column title="属性类型" :width="200" data-index="value.type">
            <template
              #cell="{
                record: {
                  value: { type, format }
                }
              }"
            >
              {{ format ? `${type} (${format})` : type }}
            </template>
          </a-table-column>
          <a-table-column title="属性描述" data-index="value.description" />
          <a-table-column title="schema" :width="200" data-index="value.schemaValue" />
        </template>
      </a-table>
    </a-collapse-item>
  </a-collapse>
</template>

<script setup lang="ts">

  const knifeStore = useKnifeStore()
  const { docket } = storeToRefs(knifeStore)
  const defines = docket.value.definitions
  const models: Record<string, any>[] = []
  defines && Object.keys(defines).forEach((key) => {
    const properties: Record<string, any>[] = []
    const define = defines[key]
    Object.keys(define.properties).forEach((p) => {
      properties.push({
        name: p,
        value: define.properties[p]
      })
    })
    const model = {
      name: define.title,
      properties
    }
    console.log('model', model)
    models.push(model)
  })

</script>

<style lang="less" scoped>
  :deep(.arco-collapse-item-content) {
    padding-left: 13px;
  }
</style>
